<template>
  <div class="myCollect">
    <template >
      <van-list v-model="loading"
                class="book-list"
                :style="{paddingBottom:(isWx?3:1)+'rem'}"
                v-if="bookList.length"
                :finished="bookList.length >= total"
                finished-text="没有更多了"
                :offset="10"
                @load="curr++">
        <van-swipe-cell :right-width="isWx?0:65"
                        v-for="(item, ind) in bookList"
                        :key="ind">
          <div class="book por">
            <div class="book-inner clearfix"
                @click="goDetails(item)">
              <div class="check fl w0 ovh" :class="{def: edit}" @click.stop>
                <div class="check-inner bsb bdr50 ovh tac"
                    @click="editCheck(item)"
                    :class="{checked: checks.includes(item.id)}">
                  <van-icon name="success"></van-icon>
                </div>
              </div>
              <div class="imgBox vam fl ovh por" :style="{width:(isWx?5:3.75)+'rem',height:(isWx?6:5.56)+'rem'}">
                <img :src="item.bigimg||item.bgimg||item.icon"
                  alt=""
                  class="big-img ">
                  <div v-if="+item.format_id===2"
                    class="typeTip">
                  <span class="tipTxt">音频</span>
                </div>
              </div>
              <div class="flex-col jca book-text">
                <div class="top-text">
                  <div class="book-name">{{item.name}}</div>
                  <div class="update-time">上次学习: {{item.before_record?util.formatTime(item.before_record):'暂未学习'}}</div>
                </div>
                <div class="bottom-text">
                  <van-progress class="progress"
                                :percentage="item.record_total / item.course_total * 100 || 0"
                                :show-pivot="false"
                                color="linear-gradient(-90deg, #fd9106, #ffd346), linear-gradient(#328eff, #328eff)"/>
                  <div class="resource-info flex jcb"
                      v-if="item.before_record">
                    <div class="resource-name">学习至：{{item.before_resource_name}}</div>
                    <div class="resource-progress wot1">
                      <div  v-if="item.record_total < item.course_total">
                        已学习：<span :class="isWx?'left-no2':'number'">{{(item.record_total / item.course_total * 100).toFixed(2) || 0}}%</span>
                      </div>
                      <div v-else>
                        <span :class="isWx?'left-no2':'number'">已完成</span>
                      </div>
                    </div>
                  </div>
                  <div v-else class="no-learn">
                    <span :class="isWx?'left-no2':'left-no'">快来开始学习吧</span>
                    <img :src="isWx?icon1:icon2"
                        class="ico"/>
                  </div>
                </div>
              </div>
              <div class="poa r0 b0 line"></div>

            </div>
          </div>
          <div class="del-btn por h100"
              @click="deleteEvent(item.course_id, ind)"
              slot="right">
            <span class="abs-mc">移除</span>
          </div>
        </van-swipe-cell>
      </van-list>
    </template>
    <template v-if="isWx">
      <div class="footer pof r0 l0 b0 flex tac aic jcb pr20 pl20" v-if="total">
        <div v-if="!edit" class="btn w100" @click="edit = true">编辑</div>
        <template v-else>
            <div class="footer-btn flex  aic">
              <div class="check  w0 ovh" style="width:2rem;transition: none;" @click.stop>
                <div class="check-inner bsb bdr50 ovh tac"
                    style="margin:0 .3rem;"
                    @click="selectAll"
                    :class="{checked: isChecks}">
                  <van-icon name="success"></van-icon>
                </div>
              </div>
              <div class="btn pr20" @click="selectAll">
                全{{checks.length === allIds.length ? '不' : ''}}选
              </div>
              <div class="btn pl20" @click="edit = false; checks = [];isChecks=false">取消</div>
            </div>
          <div class="btn del" @click="del">删除</div>
        </template>
      </div>
    </template>
    <div class="noCollect  por w100"
        :class="isWx?'vheight':'vh100'"
         v-if="!bookList.length">
      <div class="abs-mc tac">
        <img src="../../images/icon_collection_no.png"
             class="no-collect-img">
        <div class="content vw100">您还没有收藏过任何课程哦~<span style="color: #17cff8;" @click="$router.push('/')">去首页</span></div>
      </div>
    </div>

  </div>
</template>
<script>
  import { mapGetters } from 'vuex';
  import { isXxtb } from '@/config/config';

  export default {
    computed: {
      ...mapGetters(['userInfo', 'productInfo', 'hasAudio','isWx'])
    },
    data() {
      return {
        loading: true,
        total: 0,
        curr: 1,
        limits: 10,
        bookList: [],
        edit:false,
        checks: [],
        allIds: [],
        isChecks:false,
        icon1:require('@/images/smile_03.png'),
        icon2:require('@/images/smile.png'),
        isXxtb
      };
    },
    watch: {
      curr(val) {
        this.getCollectInfo();
      }
    },
    created() {
      this.getCollectInfo();
    },
    methods: {
      goDetails(item) {
        if (+item.format_id === 2) {
          this.$router.push({
            name: 'AudioDetail',
            params: {
              cid: item.course_id
            }
          });
        } else {
          this.$router.push({
            name: 'ClassDetail',
            params: { cid: item.course_id }
          });
        }
      },
      getCollectInfo(first) {
        if (first === true) {
          this.curr = 1;
          this.bookList = [];
          this.total = 0;
          return;
        }
        let url = '';
        if (!this.hasAudio) {
          url = 'api/user/get_collection_list';
        } else {
          url = 'api/user/get_format_collection_list';
        }
        this.http
          .$post(url, {
            curr: this.curr,
            limits: this.limits,
            uid: this.userInfo.uid,
            ...this.productInfo
          })
          .then(res => {
            this.loading = false;
            this.bookList.push(...res.list.map(e => {
              e.name = e.name.split(/[:：]/);
              e.name = e.name[1] || e.name[0];
              this.allIds.push(e.id);
              return e;
            }));
            this.total = res.total;
            if(this.checks.length !== this.allIds.length){
              this.isChecks = false;
            }
          });
      },
      deleteEvent(course_id, index) {
        //从页面删除，从本地删除
        this.http
          .$post('api/user/save_course_collection', {
            course_id,
            uid: this.userInfo.uid,
            ...this.productInfo
          })
          .then(res => {
            this.$toast.success(res);
            this.total--;
            this.bookList.splice(index, 1);
          })
          .catch(this.$err);
      },
      // 批量删除
      del(){
        if (!this.checks.length) return this.$toast('请至少选择一个');
        this.$dialog.confirm({
          message:'您确定要删除嘛?'
        }).then(()=>{
          this.http.$post('api/user/many_del_collection', {
            ids: this.checks.join(','),
          }).then(res => {
            this.$toast.success('删除成功');
            this.checks = [];
            this.allIds = [];
            this.edit = false;
            this.bookList = [];
            this.curr = 1;
            this.getCollectInfo();
          }).catch(this.$err);
        }).catch(()=>{
          // console.log('取消')
        })

      },
      editCheck(item) {
        if (this.checks.includes(item.id)) {
          this.checks = this.checks.filter(e => e !== item.id);
          this.isChecks = false;
        } else {
          this.checks.push(item.id);
        }
        if(this.checks.length === this.allIds.length){
          this.isChecks = true;
        }
      },
      selectAll(){
        this.checks = this.checks.length === this.allIds.length ? [] : [...this.allIds];
        this.isChecks=!this.isChecks;
      }
    }
  };
</script>

<style lang="less" scoped>
  .myCollect {
    .book-list {
      padding: 1rem;
      line-height: 1.5;
      .book-inner {
        padding-bottom: 1rem;
        position: relative;
        .line {
          height: 0.05rem;
          background-color: #f0f0f0;
          left: 4.53rem;
        }

      }
      .van-swipe-cell {
        &:not(:first-child) {
          margin-top: 1rem;
        }
      }
      .imgBox{
        margin-right: 0.75rem;
        .big-img {
          width: 100%;
          height: 100%;
          border-radius: 0.5rem;
        }
      }
      .typeTip {
        position: absolute;
        top: 0;
        left: 0;
        width: 2rem;
        height: 1rem;
        background-color: #fa5347;
        border-radius: 0.5rem 0rem 0.5rem 0rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .tipTxt {
          font-size: 0.5rem;
          color: #fff;
        }
      }
      .book-text {
        height: 5.56rem;
      }
      .book-name {
        line-height: 1;
        font-size: 0.88rem;
        color: #333231;
        padding-bottom: 0.5rem;
      }
      .update-time {
        font-size: 0.63rem;
        color: #bababa;
      }
      .bottom-text {
        font-size: 0.69rem;
        line-height: 1;
        color: #bababa;
      }
      .resource-info{
        line-height: 1rem;
      }
      .resource-name {
        color: #888;
        width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .progress {
        margin-bottom: 0.63rem;
      }
      .number {
        color: #72be50;
      }
      .no-learn {
        height: .69rem;
        line-height: .69rem;
      }
      .left-no {
        color: #ff850b;
      }
      .left-no2 {
        color: #0bcae2;
      }
      .ico {
        width: .69rem;
        height: .69rem;
      }
      .del-btn {
        margin-left: 5px;
        width: 65px;
        background-color: #f00;
        color: #fff;
      }
    }

    .noCollect {
      background-color: #fff;
      font-size: 1rem;
      line-height: 1.5;
      color: #999;
      .no-collect-img {
        width: 12.5rem;
      }
    }
    .vheight{
      height: 90vh;
    }
    .check {
      transition: width .3s;

      &.def {
        width: 2.75rem;
      }
      .check-inner {
        margin: 2.38rem 0 0 .5rem;
        width: 1rem;
        height: 1rem;
        border: solid 0.06rem #b5b5b5;
        background-color: #fff;
        .van-icon {
          display: none;
          line-height: 1rem;
        }
        &.checked {
          border: 0;
          background-color: #fa6058;
          .van-icon {
            display: block;
            font-size: .6rem;
            color: #fff;
          }
        }
      }
    }
    .footer {
    line-height: 3rem;
    background-color: #ffffff;
    box-shadow: 0 -.03rem 0 0 rgba(0, 0, 0, .12);
    font-size: 1rem;
    color: #333;
    .btn {
      /*padding: 0 2.53rem;*/
    }
    .del {
      color: #fa6058;
    }
  }
  }
</style>
